// 基础flex布局
.uni-flex {
	display: flex;
	flex-direction: row;
}
.uni-flex-item {
	flex: 1;
}
.uni-row {
	flex-direction: row;
}
.uni-column {
	flex-direction: column;
}
.flex-1 {
	flex: 1;
}
.items-end {
	align-items: end;
}
.items-baseline {
	align-items: baseline;
}
.items-flex-end {
	align-items: flex-end;
}

// 高度填充
.height-all {
	min-height: 100%;
}

// 公共区块样式
.common-wrap {
	box-sizing: border-box;
	background: #fff;
	// margin: .15rem .2rem;

	// &:first-child {
	// 	margin-right: 0;
	// }

	// &:last-child {
	// 	margin-right: .14rem;
	// }
}

// 公共滚动条样式
.common-scrollbar,
.common-scrollbar .uni-scroll-view {
	&::-webkit-scrollbar {
		width: 0.06rem;
		height: 0.06rem;
		background-color: rgba($color: #000000, $alpha: 0);
	}

	&::-webkit-scrollbar-button {
		display: none;
	}

	&::-webkit-scrollbar-thumb {
		border-radius: 0.06rem;
		box-shadow: inset 0 0 0.06rem rgba(45, 43, 43, 0.45);
		background-color: #ddd;
	}

	&::-webkit-scrollbar-track {
		background-color: transparent;
	}
}

// 公共头像样式
.common-headimg {
	overflow: hidden;
	border-radius: 50%;

	image {
		width: 100%;
	}
}

// 公共tab切换
.common-tab-wrap {
	height: 0.53rem;
	border-bottom: 0.01rem solid #e6e6e6;
	display: flex;
	padding: 0 0.2rem;
	position: relative;

	.tab-item {
		height: 0.53rem;
		line-height: 0.53rem;
		padding: 0 0.2rem;
		cursor: pointer;

		&:first-child {
			padding-left: 0;
		}

		&.active-bar {
			color: $primary-color;
		}
	}

	.active {
		position: absolute;
		width: 0;
		height: 0.03rem;
		border-radius: 0.03rem;
		background: $primary-color;
		bottom: -0.01rem;
		left: 0;
		transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	}
}

// 公共表格操作样式
.common-table-action {
	text {
		margin-left: 0.1rem;
		color: $primary-color;
		cursor: pointer;
		transition: all 0.3s;

		&:hover {
			color: rgba($color: $primary-color, $alpha: 0.6);
		}
	}
}

// 公共表格批量操作样式
.common-table-batch {
	display: flex;

	button {
		width: auto !important;
		margin: 0.1rem 0 0.1rem 0.1rem !important;
		font-size: 0.12rem;
	}
}

@mixin button {
	font-size: 0.14rem;
	transition: 0.1s;
	border-radius: 0.02rem;
	border-width: 0.01rem !important;

	&:after {
		border-radius: 0.02rem !important;
	}
}

// 主要按钮
.primary-btn {
	@include button;
	background: $primary-color !important;
	color: #fff !important;

	&:hover {
		background-color: rgba($color: $primary-color, $alpha: 0.6) !important;
	}

	&[disabled] {
		background: rgba($color: $primary-color, $alpha: 0.6) !important;
		border-color: rgba($color: $primary-color, $alpha: 0.6) !important;
		color: #fff !important;

		&:hover {
			background: rgba($color: $primary-color, $alpha: 0.6) !important;
			border-color: rgba($color: $primary-color, $alpha: 0.6) !important;
			color: #fff !important;
		}
	}
}

// 默认按钮
.default-btn {
	@include button;
	background: #fff !important;
	color: #606266 !important;
	border-color: #606266 !important;

	&:hover {
		color: $primary-color !important;
		border-color: $primary-color !important;
	}

	&:hover:after {
		border-color: $primary-color !important;
	}

	&[plain] {
		color: $primary-color !important;
		border-color: $primary-color !important;
		background-color: rgba($color: $primary-color, $alpha: 0.1) !important;

		&:after {
			border-color: $primary-color !important;
		}

		&:hover {
			background: $primary-color !important;
			color: #fff !important;
		}

		&[disabled] {
			color: #ddd !important;
			border-color: #e6e6e6 !important;
			background: #f5f5f5 !important;

			&:after {
				border-color: #e6e6e6 !important;
			}

			&:hover {
				color: #ddd !important;
				border-color: #e6e6e6 !important;
			}
		}
	}

	&[disabled] {
		color: #ddd !important;
		border-color: #e6e6e6 !important;
		background: #f5f5f5 !important;

		&:after {
			border-color: #e6e6e6 !important;
		}

		&:hover {
			color: #ddd !important;
			border-color: #e6e6e6 !important;
		}
	}
}

/* 公共数字键盘 */
.keyboard-wrap {
	width: 5rem;
	margin-top: 0.2rem;
	display: flex;

	.num-wrap {
		flex: 1;
		width: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;

		.key-item {
			margin: 0.1rem 0.1rem 0 0;
			background: #f5f5f5;
			min-width: calc((100% - 0.3rem) / 3);
			text-align: center;
			padding: 0.15rem 0;
			border-radius: 0.05rem;
			font-size: 0.16rem;
			font-weight: bold;
			transtion: all 0.3s;
			cursor: pointer;

			&:hover {
				background: #ddd;
			}

			&.empty:hover {
				background: #f5f5f5;
			}
		}
	}

	.operation-wrap {
		display: flex;
		flex-direction: column;
		width: 1rem;

		.delete,
		.confirm {
			background: #f5f5f5;
			min-width: calc((100% - 0.3rem) / 3);
			text-align: center;
			padding: 0.15rem 0;
			margin-top: 0.1rem;
			border-radius: 0.05rem;
			font-size: 0.16rem;
			cursor: pointer;
			transtion: all 0.3s;

			&:hover {
				background: #ddd;
			}
		}

		.confirm {
			flex: 1;
			background: $primary-color;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;

			&:hover {
				background: rgba($color: $primary-color, $alpha: 0.9);
			}
		}
	}
}

/* 单行超出隐藏 */
.using-hidden {
	word-break: break-all;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	white-space: break-spaces;
}
/* 多行超出隐藏 */
.multi-hidden {
	word-break: break-all;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.w-full {
	width: 100%;
}

.h-full {
	height: 100%;
}

.flex {
	display: flex;
}

.justify-between {
	justify-content: space-between;
}

.items-center {
	align-items: center;
}
.text-color {
	color: $uni-color-primary;
}
